<template>
  <div class="g-bg">
    <div class="g-polygon g-polygon-1"></div>
    <div class="g-polygon g-polygon-2"></div>
    <div class="g-polygon g-polygon-3"></div>
    <div class="g-polygon g-polygon-4"></div>
    <div class="content">
      <div class="nav">
        <span class="icon">
          <img src="@/assets/e-do-blue.png"/>
          <span>易简同行</span>
        </span>
        <span class="nav-item" :class="clickStyle === 'todo'? 'nav-click': 'nav-hover'" @click="clickNav('todo')">
          <i class="iconfont icon-success"></i>
          <span>代办事项</span>
        </span>
        <span class="nav-item" :class="clickStyle === 'plan'? 'nav-click': 'nav-hover'" @click="clickNav('plan')">
          <i class="iconfont icon-daka"></i>
          <span>执行计划</span>
        </span>
        <span class="nav-item" :class="clickStyle === 'oa'? 'nav-click': 'nav-hover'" @click="clickNav('oa')">
          <i class="iconfont icon-menu"></i>
          <span>协同办公</span>
        </span>
      </div>
      <div class="container">
        <div class="title">
          <!-- 搜索框 -->
          <span class="title-search">
             <el-input style="width: 240px" prefix-icon="Search"/>
          </span>

          <!-- 用户信息 -->
          <span class="title-nav">
            <span class="tile-nav-user">
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="30"/>
            </span>
            <span class="title-nav-name">的喵先生</span>
             <span class="title-nav-message">
              <i class="iconfont icon-email"></i>
            </span>
            <span class="title-nav-setting">
              <i class="iconfont icon-setting"></i>
            </span>
            <el-divider direction="vertical" />
            <span class="title-nav-oper">
              <i class="iconfont icon-line" @click="minWin"></i>
              <i class="iconfont icon-close" @click="closeWin"></i>
            </span>
          </span>
        </div>
        <div class="scene"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {APP_CLOSE_EVENT, APP_MIN_EVENT, LOGIN_SUCCESS} from "@/common/EventType";
import { ipcRenderer } from 'electron';
import {useRouter} from "vue-router";

// 路由
const router = useRouter();

const clickStyle = ref('todo')

//
onMounted(() => {
  ipcRenderer.send(LOGIN_SUCCESS)
  router.push({name: 'todo-list'})
})

const clickNav = (text:string) => {
  clickStyle.value = text;
}

// 退出app
const closeWin = () => {
  ipcRenderer.send(APP_CLOSE_EVENT)
}

// 最小化app
const minWin = () => {
  ipcRenderer.send(APP_MIN_EVENT)
}

const chanageRouter = (route: string) => {
  router.push({name: route})
}

</script>

<style lang="scss">
.content {
  position: relative;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 2;
  .nav {
    height: 100vh;
    width: 20%;
    padding: 0 15px;
    float: left;
    //background-color: rgb(209,226,242, 0.5);
    background-color: rgb(201,219,236, 0.7);
    .icon {
      display: block;
      height: 50px;
      line-height: 50px;
      text-align: left;
      margin-bottom: 20px;
      -webkit-app-region: drag;

      > img {
        vertical-align: middle;
        width: 30px;
        height: 30px;
      }
      > span {
        vertical-align: middle;
        margin-left: 8px;
        font-size: 25px;
      }
    }
    .nav-click {
      background-color: #f74a55;
      color: #ffffff;
      border-radius: 8px;
      cursor: pointer;
    }
    .nav-hover:hover {
      cursor: pointer;
      background-color: rgb(183, 200, 214, 0.8);
      border-radius: 8px;
    }
    .nav-item {
      display: block;
      margin: 5px 0;
      padding: 5px;
      text-align: center;
      > span {
        vertical-align: text-bottom;
        margin-left: 5px;
      }
    }
  }
  .container {
    height: 100vh;
    width: 80%;
    float: left;
    padding: 0 10px 10px 20px;

    .title {
      position: relative;
      height: 50px;
      line-height: 50px;
      -webkit-app-region: drag;
      button, input, textarea,i,span {
        -webkit-app-region: no-drag;
      }
      .title-search {
        .el-input__inner {
          background-color: #E3EEFB;
          border-color: #d1d7e0;
        }
        .el-input__inner:hover {
          border-color: #d1d7e0;
        }
        .el-input__inner:focus {
          border-color: #d1d7e0;
        }
      }
      .title-nav {
        float: right;
        height: 50px;
        line-height: 50px;

        > span {
          display: inline-block;
          height: 50px;
          line-height: 50px;
          vertical-align: bottom;
          i {
            font-size: 20px;
          }

          .el-divider {
            border-color: #c3c6ce;
          }
        }

        .tile-nav-user {
          .el-avatar {
            margin-top: 9px;
          }
        }
        .title-nav-name {
          margin-left: 5px;
          font-size: 14px;
        }

        .title-nav-message {
          margin-left: 15px;
        }

        .title-nav-setting {
          margin-left: 10px;
          margin-right: 13px;
        }

        .title-nav-oper {
          margin-left: 13px;
          i {
            cursor: pointer;
          }
          i:last-child {
            margin-left: 10px;
          }
        }
      }
    }
  }
}
.g-bg {
  position: relative;
  width: 100vw;
  height: 100vh;

  & > div:not(:last-child) {
    position: absolute;
    opacity: .6;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    backdrop-filter: blur(130px);
    z-index: 1;
  }
}

.g-polygon-1 {
  top: 0px;
  left: 25%;
  transform: translate(-50%, 0);
  width: 414px;
  height: 290px;
  background: #86b8eb;
  -webkit-clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
  clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
}

.g-polygon-2 {
  bottom: 0;
  left: 18%;
  transform: translate(-50%, 0);
  width: 1000px;
  height: 350px;
  background: #86b8eb;
  -webkit-clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
  clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
}

.g-polygon-3 {
  bottom: 10px;
  left: 73%;
  transform: translate(-50%, 0);
  width: 600px;
  height: 250px;
  background: #86b8eb;
  -webkit-clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
  clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
}
.g-polygon-4 {
  top: 7px;
  right: -30%;
  transform: translate(-50%, 0);
  width: 514px;
  height: 290px;
  background: #86b8eb;
  -webkit-clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
  clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
}
</style>
